<template>
  <div class="about">
    <!-- 顶部装饰 -->
    <dv-decoration-1 style="width: 100%; height: 60px;" />

    <!-- 关于页面内容 -->
    <div class="about-content">
      <div class="about-header">
        <h1 class="about-title">关于我们</h1>
        <p class="about-subtitle">了解更多关于这个项目的详细信息</p>
      </div>

      <div class="about-grid">
        <!-- 项目介绍 -->
        <div class="about-card">
          <div class="card-icon">🚀</div>
          <h3>项目简介</h3>
          <p>
            这是一个基于 Vue 2 + Vue CLI 的现代化数据可视化大屏项目，
            集成了 DataV 可视化组件库，提供丰富的数据展示效果和交互体验。
          </p>
        </div>

        <!-- 技术栈 -->
        <div class="about-card">
          <div class="card-icon">⚡</div>
          <h3>技术栈</h3>
          <div class="tech-stack">
            <span class="tech-tag">Vue 2.7</span>
            <span class="tech-tag">Vue Router 3.6</span>
            <span class="tech-tag">Vuex 3.6</span>
            <span class="tech-tag">DataV 2.10</span>
            <span class="tech-tag">Vue CLI 4.5</span>
            <span class="tech-tag">JavaScript ES6+</span>
          </div>
        </div>

        <!-- 功能特性 -->
        <div class="about-card">
          <div class="card-icon">🎯</div>
          <h3>核心功能</h3>
          <ul class="feature-list">
            <li>📊 实时数据可视化展示</li>
            <li>🎨 现代化UI设计风格</li>
            <li>📱 响应式布局适配</li>
            <li>⚡ 高性能数据更新</li>
            <li>🗂️ 路由导航管理</li>
            <li>🗃️ 状态集中管理</li>
          </ul>
        </div>

        <!-- 使用说明 -->
        <div class="about-card">
          <div class="card-icon">📖</div>
          <h3>使用说明</h3>
          <div class="usage-info">
            <p><strong>开发模式：</strong>npm run serve</p>
            <p><strong>构建生产：</strong>npm run build</p>
            <p><strong>代码检查：</strong>npm run lint</p>
            <p><strong>访问地址：</strong>http://localhost:8080</p>
          </div>
        </div>
      </div>

      <!-- 版本信息 -->
      <div class="version-info">
        <h3>版本信息</h3>
        <p><strong>当前版本：</strong>{{ appVersion }}</p>
        <p><strong>最后更新：</strong>{{ lastUpdate }}</p>
        <p><strong>Vue 版本：</strong>{{ vueVersion }}</p>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="back-button">
      <router-link to="/" class="btn btn-primary">
        <i class="icon-home"></i>
        返回首页
      </router-link>
    </div>

    <!-- 底部装饰 -->
    <dv-decoration-2 style="width: 100%; height: 60px; position: fixed; bottom: 0;" />
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      lastUpdate: '2025-01-21',
      vueVersion: '2.7.16'
    }
  },
  computed: {
    appVersion() {
      return this.$store.state.version
    }
  }
}
</script>

<style scoped>
.about {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  color: white;
  position: relative;
  padding-bottom: 100px;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

.about-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-subtitle {
  font-size: 1.2rem;
  color: #b0b0b0;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.about-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  text-align: center;
}

.about-card h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: #00ffff;
  text-align: center;
}

.about-card p {
  color: #b0b0b0;
  line-height: 1.6;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-tag {
  background: rgba(0, 255, 255, 0.2);
  color: #00ffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  color: #b0b0b0;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #00ffff;
  border-radius: 50%;
}

.usage-info p {
  color: #b0b0b0;
  margin-bottom: 8px;
}

.usage-info strong {
  color: #00ffff;
}

.version-info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.version-info h3 {
  color: #00ffff;
  margin-bottom: 20px;
}

.version-info p {
  color: #b0b0b0;
  margin-bottom: 10px;
}

.version-info strong {
  color: white;
}

.back-button {
  text-align: center;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(45deg, #00ffff, #0080ff);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 255, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-title {
    font-size: 2.5rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-card {
    padding: 20px;
  }
}
</style>

